<style scoped>

</style>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
let username = ref('')
let password = ref('')

function login() {
  // 简单验证输入不为空
  if (!username.value || !password.value) {
    alert('请输入账号和密码')
    return
  }
  
  // 验证账号密码
  if (username.value === 'root' && password.value === '123456') {
    window.sessionStorage.setItem('username', username.value);
    router.push('/home')
  } else {
    alert('账号或密码错误')
  }
}
</script>

<template>
  <div class="login-container">
    <h1>Login</h1>
    <div class="form-group">
      账号：<input type="text" v-model="username" placeholder="请输入账号"></input>
    </div>
    <div class="form-group">
      密码：<input type="password" v-model="password" placeholder="请输入密码"></input>
    </div>
    <button @click="login()">登录</button>
  </div>
</template>